import Taro, { useLoad } from '@tarojs/taro'
import { Form, Input, ScrollView, Button } from '@tarojs/components'
import { useEffect, useState } from 'react'
import { AtNavBar } from 'taro-ui'
import { useDispatch, useSelector } from 'react-redux'
import { SET_TOKEN } from '../../constants'
import { logParams, userLogService, userRegService } from '../../api/login'
import Styles from './index.module.scss'

export default function Login() {
  interface regParams {
    accountOrPhone: string
    passWord: string
    repassWord: string
  }
  const dispatch = useDispatch()
  const [navBarHeight, setNavBarHeight] = useState(0)
  //控制登录注册页面切换
  const [isBoxVisible, setIsBoxVisible] = useState(true)
  const handleButtonClick = () => {
    setIsBoxVisible(!isBoxVisible)
  }
  //表单数据
  // const [password, setPassword] = useState<string>('')
  // const [accountOrPhone, setAccountOrPhone] = useState<string>('')
  const [showPassword, setShowPassword] = useState<boolean>(false)
  const [showRegPassword, setShowRegPassword] = useState<boolean>(false)
  const [showRegrePassword, setShowRegrePassword] = useState<boolean>(false)
  //登录表单
  const [loginFormValue, setLoginFormValue] = useState<logParams>({
    accountOrPhone: '',
    passWord: '',
  })
  //注册表单
  const [regFormValue, setRegFormValue] = useState<regParams>({
    accountOrPhone: '',
    passWord: '',
    repassWord: '',
  })
  const [inputKey, setInputKey] = useState<number>(0) // 添加一个用于更新输入框的 key
  const [inputRegPwdKey, setInputRegPwdKey] = useState<number>(0)
  const [inputRegrePwdKey, setInputRegrePwdKey] = useState<number>(0)

  //登录密码显示隐藏
  const togglePasswordVisibility = () => {
    console.log('togglePasswordVisibility')
    setShowPassword(!showPassword)
    setInputKey((prevKey) => prevKey + 1) // 更新 key，强制重新渲染
  }

  //登录密码显示隐藏
  const toggleRegPasswordVisibility = () => {
    console.log('toggleRegPasswordVisibility')
    setShowRegPassword(!showRegPassword)
    setInputRegPwdKey((prevKey) => prevKey + 1) // 更新 key，强制重新渲染
  }

  //登录密码显示隐藏
  const toggleRegrePasswordVisibility = () => {
    console.log('toggleRegrePasswordVisibility')
    setShowRegrePassword(!showRegrePassword)
    setInputRegrePwdKey((prevKey) => prevKey + 1) // 更新 key，强制重新渲染
  }

  useEffect(() => {
    // 设置状态栏字体颜色为黑色
    Taro.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#f0f0f0',
    })
  }, [])

  // 模拟计算高度的逻辑
  useEffect(() => {
    let sysinfo = Taro.getSystemInfoSync() //获取设备系统对象
    if (sysinfo.statusBarHeight !== undefined) {
      const statusBarHeight = sysinfo.statusBarHeight //获取状态栏高度
      setNavBarHeight(statusBarHeight)
      console.log(statusBarHeight)
      console.log('statusBarHeight:', statusBarHeight)
    }
  }, [])
  //同步获取登录表单内容
  const handleInput = (key, value) => {
    setLoginFormValue((preLoginFormValue) => ({
      ...preLoginFormValue,
      [key]: value,
    }))
  }
  //同步注册登录表单内容
  const handleRegInput = (key, value) => {
    setRegFormValue((preRegFormValue) => ({
      ...preRegFormValue,
      [key]: value,
    }))
  }

  //定义登录校验逻辑
  const validateFields = (values: logParams) => {
    const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[@_%\d])[a-zA-Z@_%\d]{8,16}$/ //密码长度8-16，只能包含英文，数字，特殊字符@_%。至少包含一个英文，一个数字或特殊字符

    //创建一个新的错误对象
    let newErrors = {}

    // 校验用户名
    if (!values.accountOrPhone) {
      newErrors = {
        ...newErrors,
        usernameMsg: '请输入用户名或手机号',
      }
    }

    // 校验密码
    if (!values.passWord) {
      newErrors = {
        ...newErrors,
        passwordMsg: '请输入密码',
      }
    } else if (!passwordRegex.test(values.passWord)) {
      newErrors = {
        ...newErrors,
        passwordMsg: '密码为8-16位,且至少包含一个英文，一个数字和特殊字符(@_%)',
      }
    }

    // 返回一个包含新错误信息的 Promise
    return new Promise<void>((resolve, reject) => {
      if (Object.values(newErrors).every((error) => !error)) {
        // 校验通过，resolve
        resolve()
      } else {
        // 校验失败，reject 并传递新错误对象
        reject(newErrors)
      }
    })
  }

  //定义注册校验逻辑
  const validateRegFields = (values: regParams) => {
    const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[@_%\d])[a-zA-Z@_%\d]{8,16}$/ //密码长度8-16，只能包含英文，数字，特殊字符@_%。至少包含一个英文，一个数字或特殊字符

    //创建一个新的错误对象
    let newErrors = {}

    // 校验用户名
    if (!values.accountOrPhone) {
      newErrors = {
        ...newErrors,
        usernameMsg: '请输入用户名或手机号',
      }
    }

    // 校验密码
    if (!values.passWord) {
      newErrors = {
        ...newErrors,
        passwordMsg: '请输入密码',
      }
    } else if (!values.repassWord) {
      newErrors = {
        ...newErrors,
        passwordMsg: '请再次输入密码',
      }
    } else if (!passwordRegex.test(values.passWord)) {
      newErrors = {
        ...newErrors,
        passwordMsg: '密码为8-16位,且至少包含一个英文，一个数字和特殊字符(@_%)',
      }
    } else if (values.repassWord !== values.passWord) {
      newErrors = {
        ...newErrors,
        passwordMsg: '两次输入的密码不一致',
      }
    }

    // 返回一个包含新错误信息的 Promise
    return new Promise<void>((resolve, reject) => {
      if (Object.values(newErrors).every((error) => !error)) {
        // 校验通过，resolve
        resolve()
      } else {
        // 校验失败，reject 并传递新错误对象
        reject(newErrors)
      }
    })
  }

  //提交登录表单进行校验并登录
  const handleSubmit = async (e) => {
    e.preventDefault()
    try {
      await validateFields(loginFormValue)
      // Taro.showToast({
      //   title: '检验成功',
      //   icon: 'success',
      //   duration: 2000, // 提示持续时间，单位：毫秒
      // })
      //验证成功
      //setStatus(true)
      handleLogin()
    } catch (newErrors) {
      // 校验失败，更新错误状态
      if (newErrors.usernameMsg !== undefined) {
        const message = `${newErrors.usernameMsg}`
        Taro.showToast({
          title: message,
          icon: 'none',
          duration: 2000, // 提示持续时间，单位：毫秒
        })
      } else if (
        newErrors.usernameMsg === undefined &&
        newErrors.passwordMsg !== undefined
      ) {
        const message = `${newErrors.passwordMsg}`
        Taro.showToast({
          title: message,
          icon: 'none',
          duration: 2000, // 提示持续时间，单位：毫秒
        })
      }
    }
  }
  //提交注册表单进行校验并注册
  const handleRegSubmit = async (e) => {
    e.preventDefault()
    try {
      await validateRegFields(regFormValue)
      // Taro.showToast({
      //   title: '检验成功',
      //   icon: 'success',
      //   duration: 2000, // 提示持续时间，单位：毫秒
      // })
      //验证成功
      // setRegStatus(true)
      handleReg()
    } catch (newErrors) {
      // 校验失败，更新错误状态
      //username优先报错提示，而后是passWord报错
      if (newErrors.usernameMsg !== undefined) {
        const message = `${newErrors.usernameMsg}`
        Taro.showToast({
          title: message,
          icon: 'none',
          duration: 2000, // 提示持续时间，单位：毫秒
        })
      } else if (
        newErrors.usernameMsg === undefined &&
        newErrors.passwordMsg !== undefined
      ) {
        const message = `${newErrors.passwordMsg}`
        Taro.showToast({
          title: message,
          icon: 'none',
          duration: 2000, // 提示持续时间，单位：毫秒
        })
      }
      console.log(newErrors)
    }
  }
  //登录处理
  const token = useSelector((state: any) => state.user.token)
  //登录函数
  const handleLogin = async () => {
    //当预校验成功
    try {
      const res = await userLogService(loginFormValue)
      if (res.code === 0) {
        //存储token
        dispatch({ type: SET_TOKEN, payload: { token: res.data.token } })
        Taro.setStorageSync('token', res.data.token)
        Taro.showToast({
          title: '登录成功',
          icon: 'none',
          duration: 2000, // 提示持续时间，单位：毫秒
        })
        //跳转到个人中心
        Taro.switchTab({
          url: '/pages/user/index',
        })
      } else {
        Taro.showToast({
          title: '登录失败',
          icon: 'none',
          duration: 2000, // 提示持续时间，单位：毫秒
        })
      }
      console.log(loginFormValue)
    } catch (err) {
      Taro.showToast({
        title: '登录失败',
        icon: 'none',
        duration: 2000, // 提示持续时间，单位：毫秒
      })
      console.log('登录失败', err)
    }
  }

  //注册处理
  const handleReg = async () => {
    try {
      const res = await userRegService({
        accountOrPhone: regFormValue.accountOrPhone,
        passWord: regFormValue.passWord,
      })
      //注册成功才返回登录页
      if (res.code === 0) {
        Taro.showToast({
          title: `注册成功`,
          icon: 'none',
          duration: 2000, // 提示持续时间，单位：毫秒
        })
        setIsBoxVisible(true)
        console.log(regFormValue)
        console.log(res)
      } else {
        //注册失败返回失败
        Taro.showToast({
          title: `注册失败,${res.msg}`,
          icon: 'none',
          duration: 2000, // 提示持续时间，单位：毫秒
        })
      }
    } catch (err) {
      Taro.showToast({
        title: `注册失败,${err}`,
        icon: 'none',
        duration: 2000, // 提示持续时间，单位：毫秒
      })
      console.log('注册失败', err)
    }
  }

  useEffect(() => {
    console.log('Token in Redux store:', token)
  }, [token])

  useLoad(() => {
    console.log('Page loaded.')
  })

  return (
    <ScrollView scrollY style={{ height: '100vh' }}>
      <AtNavBar
        customStyle={{ height: navBarHeight, backgroundColor: ' #f0f0f0' }}
        fixed
      />
      <div className={Styles.all}>
        <div className={Styles.login}>
          <div className={Styles.header}>
            <img
              src={require('../../../src/assets/login/bg.png')}
              alt=''
              className={Styles.header_img}
            />
          </div>
          <div className={Styles.main}>
            {isBoxVisible && (
              <Form onSubmit={handleSubmit}>
                <div className={Styles.login_page}>
                  <div className={Styles.title}>登录</div>
                  <div className={Styles.green_div}></div>
                  <div className={Styles.item_first}>
                    <img
                      src={require('../../../src/assets/login/user.png')}
                      alt=''
                      className={Styles.user_icon}
                    />
                    <Input
                      type='text'
                      placeholder='请输入账号/手机号'
                      className={Styles.username_input}
                      placeholderStyle='color:#bbbbbb'
                      value={loginFormValue.accountOrPhone}
                      onInput={(e) =>
                        handleInput('accountOrPhone', e.detail.value)
                      }
                    />
                  </div>
                  <div className={Styles.item_second}>
                    <img
                      src={require('../../../src/assets/login/password.png')}
                      alt=''
                      className={Styles.password_icon}
                    />
                    <Input
                      key={inputKey}
                      type={showPassword ? 'text' : 'password'}
                      placeholder='请输入密码'
                      className={Styles.password_input}
                      placeholderStyle='color:#bbbbbb'
                      value={loginFormValue.passWord}
                      onInput={(e) => handleInput('passWord', e.detail.value)}
                    />
                    <div
                      onClick={togglePasswordVisibility}
                      className={Styles.see}
                    >
                      <img
                        src={require('../../../src/assets/login/see.png')}
                        alt=''
                        className={Styles.see_icon}
                      />
                    </div>
                  </div>
                  <div className={Styles.btn_div}>
                    <Button className={Styles.btn} formType='submit'>
                      登录
                    </Button>
                  </div>
                </div>
              </Form>
            )}
            {!isBoxVisible && (
              <Form onSubmit={handleRegSubmit}>
                <div className={Styles.login_page}>
                  <div className={Styles.title}>注册</div>
                  <div className={Styles.green_div}></div>
                  <div className={Styles.item_first}>
                    <img
                      src={require('../../../src/assets/login/user.png')}
                      alt=''
                      className={Styles.user_icon}
                    />
                    <Input
                      type='text'
                      placeholder='请输入账号/手机号'
                      className={Styles.username_input}
                      placeholderStyle='color:#bbbbbb'
                      onInput={(e) =>
                        handleRegInput('accountOrPhone', e.detail.value)
                      }
                      value={regFormValue.accountOrPhone}
                    />
                  </div>
                  <div className={Styles.item_second}>
                    <img
                      src={require('../../../src/assets/login/password.png')}
                      alt=''
                      className={Styles.password_icon}
                    />
                    <Input
                      key={inputRegPwdKey}
                      type={showRegPassword ? 'text' : 'password'}
                      placeholder='请输入密码'
                      className={Styles.password_input}
                      placeholderStyle='color:#bbbbbb'
                      value={regFormValue.passWord}
                      onInput={(e) =>
                        handleRegInput('passWord', e.detail.value)
                      }
                    />
                    <div
                      onClick={toggleRegPasswordVisibility}
                      className={Styles.see}
                    >
                      <img
                        src={require('../../../src/assets/login/see.png')}
                        alt=''
                        className={Styles.see_icon}
                      />
                    </div>
                  </div>
                  <div className={Styles.item_second}>
                    <img
                      src={require('../../../src/assets/login/password.png')}
                      alt=''
                      className={Styles.password_icon}
                    />
                    <Input
                      key={inputRegrePwdKey}
                      type={showRegrePassword ? 'text' : 'password'}
                      placeholder='请再次输入密码'
                      className={Styles.password_input}
                      placeholderStyle='color:#bbbbbb'
                      value={regFormValue.repassWord}
                      onInput={(e) =>
                        handleRegInput('repassWord', e.detail.value)
                      }
                    />
                    <div
                      onClick={toggleRegrePasswordVisibility}
                      className={Styles.see}
                    >
                      <img
                        src={require('../../../src/assets/login/see.png')}
                        alt=''
                        className={Styles.see_icon}
                      />
                    </div>
                  </div>
                  <div className={Styles.btn_div}>
                    <Button className={Styles.btn} formType='submit'>
                      注册
                    </Button>
                  </div>
                </div>
              </Form>
            )}
          </div>
          {isBoxVisible && (
            <div className={Styles.footer}>
              <div className={Styles.footer_text}>
                还没有创建账号？
                <span className={Styles.create} onClick={handleButtonClick}>
                  创建账户
                </span>
              </div>
            </div>
          )}
          {!isBoxVisible && (
            <div className={Styles.footer_reg}>
              <div className={Styles.footer_text}>
                已经创建账号？
                <span className={Styles.create} onClick={handleButtonClick}>
                  登录账号
                </span>
              </div>
            </div>
          )}
        </div>
      </div>
    </ScrollView>
  )
}
